<template>
    <div>
        <a-form-model ref="form" :model="form">
            <template v-for="item, index in result">
                <!-- 单行输入框 -->
                <a-form-model-item v-if="item.componentName === 'TextField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-input v-model="form[item.props.id]" :placeholder="item.props.placeholder" />
                </a-form-model-item>

                <!-- 多行输入框 -->
                <a-form-model-item v-else-if="item.componentName === 'TextareaField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-textarea v-model:value="form[item.props.id]" :placeholder="item.props.placeholder" />
                </a-form-model-item>

                <!-- 数字输入框 -->
                <a-form-model-item v-else-if="item.componentName === 'NumberField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-input-number v-model="form[item.props.id]" :min="0" style="width: 100%"
                        :placeholder="item.props.placeholder" />
                </a-form-model-item>

                <!-- 单选框 -->
                <a-form-model-item v-else-if="item.componentName === 'DDSelectField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-select :placeholder="item.props.placeholder" v-model="form[item.props.id]">
                        <a-select-option v-for="(d, index) in item.props.options" :key="index"
                            :value="JSON.parse(d).key">{{ JSON.parse(d).value
                            }}</a-select-option>
                    </a-select>
                </a-form-model-item>

                <!-- 多选框 -->
                <a-form-model-item v-else-if="item.componentName === 'DDMultiSelectField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-select mode="multiple" :placeholder="item.props.placeholder" v-model="form[item.props.id]">
                        <a-select-option v-for="(d, index) in item.props.options" :key="index"
                            :value="JSON.parse(d).key">{{ JSON.parse(d).value
                            }}</a-select-option>
                    </a-select>
                </a-form-model-item>

                <!-- 日期 -->
                <a-form-model-item v-else-if="item.componentName === 'DDDateField'" :label="item.props.label"
                    prop="dictSort" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-date-picker v-model:value="form[item.props.id]" :format="item.props.format"
                        :placeholder="item.props.placeholder" />
                </a-form-model-item>


                <!-- <a-form-model-item v-else-if="item.componentName === 'DDDateRangeField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-range-picker v-model:value="form[item.props.id]" :format="item.props.format" :placeholder="item.props.placeholder" />
                </a-form-model-item> -->
                <!-- 日期区间 -->
                <template v-else-if="item.componentName === 'DDDateRangeField'">
                    <a-form-model-item :label="JSON.parse(item.props.label)[0]" :prop="item.props.id"
                        :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                        <a-date-picker v-model:value="form[item.props.id][0]" :format="item.props.format"
                            :placeholder="item.props.placeholder" />
                    </a-form-model-item>
                    <a-form-model-item :label="JSON.parse(item.props.label)[1]" :prop="item.props.id"
                        :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                        <a-date-picker v-model:value="form[item.props.id][1]" :format="item.props.format"
                            :placeholder="item.props.placeholder" />
                    </a-form-model-item>
                </template>

                <!-- 说明文字 -->
                <a-form-model-item v-else-if="item.componentName === 'TextNote'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-input v-model:value="form[item.props.id]" :bordered="false"
                        :placeholder="item.props.placeholder" />
                </a-form-model-item>

                <!-- 身份证 -->
                <a-form-model-item v-else-if="item.componentName === 'IdCardField'" :label="item.props.label"
                    :prop="item.props.id"
                    :rules="[{ required: item.props.required, message: item.props.placeholder }, { pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/, message: '格式不正确' }]">
                    <a-input v-model:value="form[item.props.id]" :placeholder="item.props.placeholder" />
                </a-form-model-item>

                <!-- 电话 -->
                <a-form-model-item v-else-if="item.componentName === 'PhoneField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-input v-model:value="form[item.props.id]" :placeholder="item.props.placeholder" />
                </a-form-model-item>
                <!-- 联级没写 -->

                <!-- 图片 -->
                <a-form-model-item v-else-if="item.componentName === 'DDPhotoField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <base-upload v-model="form[item.props.id]"></base-upload>
                </a-form-model-item>

                <!-- 金额 -->
                <a-form-model-item v-else-if="item.componentName === 'MoneyField'" :label="item.props.label"
                    :prop="item.props.id" :rules="[{ required: item.props.required, message: item.props.placeholder }]">
                    <a-input-number v-model="form[item.props.id]" :min="0" style="width: 100%" :placeholder="item.props.placeholder" />
                </a-form-model-item>
            </template>
            <div class="bottom-control">
                <a-space>
                    <a-button type="primary" :loading="submitLoading" @click="submitForm">
                        保存
                    </a-button>
                    <a-button type="dashed" @click="cancel">
                        取消
                    </a-button>
                </a-space>
            </div>
        </a-form-model>
    </div>
</template>

<script>
import { method } from 'lodash';
import baseUpload from '@/components/FileUpload'
// import { result } from './index.js';
export default {
    components: {
        baseUpload
    },
    data() {
        return {
            form: {},
            submitLoading: false,
            result: [
                {
                    "componentName": "NumberField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "bizAlias": "",
                        "id": "NumberField_13T05WT2XOXS0",
                        "label": "项目名称",
                        "placeholder": "请输入项目名称",
                        "required": false,
                        "push": {}
                    }
                },
                {
                    "componentName": "DDSelectField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "options": [
                            "{\"value\":\"左洋\",\"key\":\"option_0\"}",
                            "{\"value\":\"陈通\",\"key\":\"option_1\"}",
                            "{\"value\":\"李燕\",\"key\":\"option_2\"}"
                        ],
                        "bizAlias": "",
                        "id": "DDSelectField_PETGWAG5I8G0",
                        "label": "项目经理",
                        "placeholder": "请选择项目经理",
                        "required": true,
                        "push": {},
                        "fieldsInfo": "[]",
                        "behaviorLinkage": []
                    }
                },
                {
                    "componentName": "DDSelectField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "options": [
                            "{\"value\":\"方式一\",\"key\":\"option_0\"}",
                            "{\"value\":\"方式二\",\"key\":\"option_1\"}",
                            "{\"value\":\"方式三\",\"key\":\"option_2\"}"
                        ],
                        "bizAlias": "",
                        "id": "DDSelectField_14VGRJHATNEK0",
                        "label": "发货方式",
                        "placeholder": "请选择发货方式",
                        "required": true,
                        "push": {},
                        "fieldsInfo": "[]",
                        "behaviorLinkage": []
                    }
                },
                {
                    "componentName": "DDDateField",
                    "props": {
                        "staffStatusEnabled": false,
                        "unit": "天",
                        "holidayOptions": [],
                        "format": "yyyy-MM-dd",
                        "bizAlias": "",
                        "id": "DDDateField_12M07M83VLZ40",
                        "label": "发货日期",
                        "placeholder": "请选择",
                        "required": false,
                        "push": {}
                    }
                },
                {
                    "componentName": "DDDateField",
                    "props": {
                        "staffStatusEnabled": false,
                        "unit": "天",
                        "holidayOptions": [],
                        "format": "yyyy-MM-dd",
                        "bizAlias": "",
                        "id": "DDDateField_1HITN5MR6IBK0",
                        "label": "预计到货日期",
                        "placeholder": "请选择",
                        "required": false,
                        "push": {}
                    }
                },
                {
                    "componentName": "TextareaField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "bizAlias": "",
                        "id": "TextareaField_1UF7CR0YDL1C0",
                        "label": "发货原因",
                        "placeholder": "请输入发货原因",
                        "required": false,
                        "push": {}
                    }
                },
                {
                    "componentName": "MoneyField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "notUpper": "0",
                        "bizAlias": "",
                        "id": "MoneyField_1J75GP1V8W3K0",
                        "label": "异常费用",
                        "placeholder": "请输入金额",
                        "required": true,
                        "push": {}
                    }
                },
                {
                    "componentName": "DDPhotoField",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "id": "DDPhotoField_P275MR2H0HS0",
                        "label": "图片",
                        "required": false,
                        "push": {}
                    }
                },
                {
                    "componentName": "DDAttachment",
                    "props": {
                        "staffStatusEnabled": false,
                        "holidayOptions": [],
                        "id": "DDAttachment_1087HSJJ3EPS0",
                        "label": "附件",
                        "required": false,
                        "push": {}
                    }
                }
            ]
        }
    },
    created() {
        // console.log(result);
    },
    method: {
        submitForm() {
            console.log(11);
        },
        cancel() {
            console.log(11);
        }
    }
} 
</script>

<style lang="scss" scoped></style>